<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>公司面经</title>
    <link rel="stylesheet" href="//at.alicdn.com/t/font_1992971_c1dhs6uqoej.css">
    <style>
        *{
            margin:0;
            padding:0;
        }
        html{
            font-size: 14px;
        }
        ul,li{
            list-style: none;
        }
        h1,h2,h3,h4,h5,h6{
            font-size: 14px;
            font-weight: normal;
        }
        i,em{
            font-style: normal;
        }
        b,strong{
            font-weight: normal;
        }
        a{
            text-decoration: none;
            color: #000;
        }

        /* 面经合集 */
        #company{
            width: 100%;
            background-color: #eee;
            overflow: hidden;
        }
        .company-con{
            width: 1158px;
            margin: 50px auto;
            background-color: #fff;
            padding: 20px;
        }
        .company-con h2{
           margin-bottom: 20px;
        }
        .company-con h2 .iconfont{
            color: #ff6547;
            font-size: 18px;
        }
        .company-con h2 i{
            font-size: 16px;
            color: #333;
            margin-left: 8px;
            font-weight: bold;
        }
        .com-list{
            overflow: hidden;
            width: 1178px;
        }
        .com-list a{
            display: block;
            float: left;
            margin: 0 12px 10px 0;
            width: 220px;
            height: 210px;
            border-radius: 4px;
            cursor: pointer;
            text-align: center;
            font-size: 14px;
            border: 1px solid #e1e1e1;
        }
        .com-list a:hover{
            box-shadow: 0 0 10px #ddd;
        }
        .com-list a:hover .name{
            color: #25bb9b;
        }
        .com-pic{
            width: 70px;
            height: 70px;
            border-radius: 50%;
            overflow: hidden;
            margin: 20px auto;
        }
        .com-pic img{
            width: 100%;
            height: 100%;
        }
        .com-main i{
            color: #333;
        }
        .com-txt{
            height: 36px;
            padding: 10px 0;
            margin-top: 26px;
            border-top: 1px solid #e1e1e1;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        .com-txt b{
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
            border-right: 1px solid #e1e1e1;
            padding: 0 39px;
        }
        .com-list .template{
            display: none;
        }
    </style>
</head>
<body>  
    <!-- 公司面经 -->
    <div id="company">
        <div class="company-con">
            <h2>
                <span class="iconfont icon-gongsi"></span>
                <i>公司面经</i>
            </h2>
            <div class="com-list">
                <a class="template" target="_blank">
                    <div class="com-main">
                        <div class="com-pic">
                            <img src="" alt="">
                        </div>
                        <i class="name"></i>
                    </div>
                    <div class="com-txt">
                        <b>
                            <em class="exp"></em>
                            面经
                        </b>
                        <b>
                            <em class="ans"></em>
                            评论
                        </b>
                    </div>
                </a>
            </div>
        </div>
    </div>

    <script src="./js/jquery.min.js"></script>
    <script>
        $(function(){
            $.ajax({
                url:"http://127.0.0.1:84/getCompany",
                success(data){
                    let list = JSON.parse(data)
                    let template = $(".template")
                    list.forEach(item => {
                        let newLi = template.clone(true)
                        newLi.removeClass()
                        $(".com-list").append(newLi)

                        newLi.attr("href",`http://127.0.0.1:84/list.html?name=${window.location.href.split("?")[1].split("=")[1]}`)
                        newLi.find("img").attr("src",item.img)
                        newLi.find(".name").html(item.name)
                        newLi.find(".exp").html(item.exp)
                        newLi.find(".ans").html(item.ans)
                    });
                }
            })
        })
    </script>
</body>
</html>